﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     
    <!-- jQuery and jQuery Mobile -->
    <script type="text/javascript" src="scripts/local-storage-extensions.js"></script>  
    <script type="text/javascript" src="scripts/storage.js"></script>
    <script type="text/javascript" src="scripts/expenses.js"></script>
    <script type="text/javascript" src="scripts/accounts.js"></script>
    <script type="text/javascript" src="scripts/categories.js"></script>
    <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
    <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <!--<link rel="stylesheet" href="/resources/demos/style.css" />-->
    
    <script>
        $(function () {
            $("#datepicker").datepicker({ dateFormat: "dd/mm/yy" });
        });
    </script>

    <style>
        div > ul > li a > span {
            display: inline-block;
            float: right;
            color: #61B329;
            font-size: 14px;
            text-shadow: 1px 1px 0px green;
        }

    @media (min-width:480px) {
        span.totalAccountsSum {
            display: inline-block;
            float: right;
            color: white;
        }

        p#addAccountButton div.ui-btn-shadow {
            display: inline-block;
        }

        p#addAccountButton > div {
            margin-right: 5px;
            width: 78%;
        }
        span.ui-btn-inner {
            width:100%;
        }

        .ui-content div div {
            float:right;
        }
        .ui-content div p {
            float:right;
        }
    }

    </style>
</head>
<body>
    <div data-role="page" id="Div1">
        <div data-theme="a" data-role="header">
             
            <h3>
                Add account
            </h3>
            <a id="backButton" data-role="button" href="" data-icon="back" data-iconpos="left"
            class="ui-btn-left">
                Back
            </a>

            <a id="save-account-button" data-role="button" href="#page1" data-icon="save" data-iconpos="right"
        class="ui-btn-right">
            Save
        </a>
        </div>
        <div data-role="content">
            <div data-role="fieldcontain" id="select-account-menu">
                <label for="selectmenu2">
                    Type:         
                </label>
                <select id="type" id="selectmenu2" name="Type" data-theme="d">
                    <option value="debit" data-theme="b">Debit Card
                </option>
                    <option value="credit" data-theme="b">Credit Card
                </option>
                    <option value="bank" data-theme="b">Bank Account
                </option>
                </select>
            </div>
            <div data-role="fieldcontain">
                <label for="textinput2">
                    Name:
           
                </label>
                <input name="" id="name" placeholder="" value="" type="text" data-mini="true" />
            </div>
            <div data-role="fieldcontain">
                <label for="textinput3">
                    Balance:           
                </label>
                <input name="" id="balance" placeholder="" value="" type="text" data-mini="true" />
            </div>
           <div data-role="fieldcontain", id="addAccountButton">
                <label>
                    Date:           
                </label>                
                <input type="text" id="datepicker" />
            </div>
        </div>
    </div>
    <script type="text/javascript" src="scripts/add-account-ui.js"></script>
</body>
</html>